#setting-box {
    .dialog-header {
        background: transparent;
        border: none;
        height: 30px;
        .dialog-close {
            background: transparent;
            color: #000;
            font-size: 20px;
        }
    }
    li {
        line-height: 50px;
        text-align: left;
        font-size: 20px;
        >span {
            margin: 0 20px;
        }
        >div {
            display: inline-block;
        }
        .theme-box {
            padding-top: 5px;
            span {
                border-radius: 50%;
                display: inline-block;
                width: 30px;
                height: 30px;
                border: 1px solid #333;
                box-sizing: border-box;
                &.active {
                    border: 4px solid #f00;
                }
            }
        }
        .font-box {
            span {
                border: 1px solid #333;
                padding: 2px 5px;
                &.active {
                    border-color: #f00;
                }
            }
        }
    }
}

.theme-0 {
    background: #ede7da;
    .chapte-box,
    .chapter-sidebar,
    #setting-box {
        background: #f8f3e9;
    }
}

.theme-1 {
    background: #e0ce9e;
    .chapte-box,
    .chapter-sidebar,
    #setting-box {
        background: #f3e9c6;
    }
}

.theme-2 {
    background: #cddfcd;
    .chapte-box,
    .chapter-sidebar,
    #setting-box {
        background: #e2eee2;
    }
}

.theme-3 {
    background: #cfdde1;
    .chapte-box,
    .chapter-sidebar,
    #setting-box {
        background: #e2eff3;
    }
}

.theme-4 {
    background: #ebcece;
    .chapte-box,
    .chapter-sidebar,
    #setting-box {
        background: #f5e4e4;
    }
}

.theme-5 {
    background: #d0d0d0;
    .chapte-box,
    .chapter-sidebar,
    #setting-box {
        background: #dcdcdc;
    }
}

.theme-6 {
    background: #0f1112;
    .chapte-box,
    .chapter-sidebar {
        background: #111;
    }
}

$box-width: (
    640,
    800,
    900,
    1280
);

@each $w in $box-width {
    .width-#{$w} {
        .chapte-box {
            width: #{$w}px;
        }
    }
}

.chapte-box {
    &.font-0 {
        font-family: 'Microsoft YaHei',PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light',sans-serif;
    }
    &.font-1 {
        font-family: PingFangSC-Regular,'-apple-system',Simsun;
    }
    &.font-2 {
        font-family: Kaiti;
    }
    &.font-3 {
        font-family: 方正启体简体,"Microsoft YaHei",微软雅黑,宋体;
    }
}